<template>
	<view class="CollectMoney">
		<view class="" style="margin-bottom: 0rpx;background-color: #ffffff7d;padding: 20rpx;">
			<uni-datetime-picker @change="changeDate" :clear-icon="false" v-model="range" type="daterange" />
		</view>
		<view class="container" style="">
			<scroll-view class="scroll" scroll-y="true" style="height: 100%;" @scrolltolower="lower">
				<view class="">
					<view class="form"
						style=" background-color: #fff;border-radius: 25rpx;margin:0 0 20rpx 0;padding: 20rpx;"
						v-for="(item,index) in entity" :key="index" @click="reconClick(item)">
						<view class="cell right" style="display: flex;justify-content: space-between;">
							<view class="label">单号: </view>
							<view class="content">
								{{getReplaceId("S"+item.Id)}}
							</view>
						</view>
						<view class="cell right" style="display: flex;justify-content: space-between;">
							<view class="label">对账日期: </view>
							<view class="content">
								{{item.CreateTime.substring(0,10)}}
							</view>
						</view>
						<view class="cell right" style="display: flex;justify-content: space-between;">
							<view class="label ">客 户: </view>
							<view class="content">
								{{item.CustomerName}}
							</view>
						</view>
						<view class="cell right" style="display: flex;justify-content: space-between;">
							<view class="label">账 期: </view>
							<view class="content">
								{{item.StartTime.substring(0,10)}} ~ {{item.EndTime.substring(0,10)}}
							</view>
						</view>
						<view class="" style="display: flex;justify-content: space-between;">
							<view class="cell right" style="display: flex;justify-content: space-between;">
								<view class="label">上期余额: </view>
								<view class="content cRight" style="margin-left: 30rpx;">
									￥{{momenyFormat(item.Balance)}}
								</view>
							</view>
							<view class="cell right" style="display: flex;justify-content: space-between;">
								<view class="label">本期新欠: </view>
								<view class="content cRight" style="margin-left: 30rpx;">
									￥{{momenyFormat(item.Arrears)}}
								</view>
							</view>
						</view>
						<view class="" style="display: flex;justify-content: space-between;">
							<view class="cell right" style="display: flex;justify-content: space-between;">
								<view class="label">本期还款: </view>
								<view class="content cRight" style="margin-left: 30rpx;">
									￥{{momenyFormat(item.Repayment)}}
								</view>
							</view>
							<view class="cell right" style="display: flex;justify-content: space-between;">
								<view class="label">本期余额: </view>
								<view class="content cRight" style="margin-left: 30rpx;">
									￥{{momenyFormat(item.Residue)}}
								</view>
							</view>
						</view>
						<view class="unitag" style="display: flex;justify-content: flex-end">
							<uni-tag v-if="item.IsReconcile==0 || item.IsReconcile==null"  text="未对" type="danger" ></uni-tag>
							<uni-tag v-else  text="已对" type="primary"></uni-tag>
						</view>
						<view v-if="item.Signature" class="" style="display: flex;justify-content: flex-end;">
							<!--  -->
							<view class="imgBox">
								<image class="img" :src="item.Signature" alt="客户签名">
							</view>
						</view>
					</view>
				</view>
				<!-- 上拉显示更多 -->
				<view class="">
					<uniLoadMore :status="status" :contentText="contentText" :rows="entity"></uniLoadMore>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {
		regPhone
	} from '@/utils/regExp.js'
	import {
		momenyFormat,
		formatDate,
		getMonthRange
	} from '@/util/util.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				entity: [],
				data: [],
				query: {
					PageIndex: 1,
					PageRows: 10,
					// 根据时间的倒叙
					SortField: "CreateTime",
					SortType: 'desc',
					Search: {
						// 当前客户id
						CustomerId: "",
						// 开始时间
						StartTime: "",
						// 结束时间
						EndTime: ""
					}
				},
				Total: 0,
				range: [],
				optios: {}
			}
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			console.log('this。queyr',this.query)
			this.query.PageIndex= 1
			this.query.PageRows =10
			this.entity=[]
			this.getBillConfirmList()
			// 重置相关参数
			uni.stopPullDownRefresh(); //停止刷新
		},
		onLoad(query) {
			this.range = getMonthRange(1)
			this.options = JSON.parse(query.data)
			this.query.Search.CustomerId = this.options.Id
			this.query.Search.StartTime = this.range[0]
			this.query.Search.EndTime = this.range[1]
			this.status = "loading"
		},
		onShow() {
			this.status = "loading"
			this.query.PageIndex = 1
			// 获取欠款对账单列表
			this.getBillConfirmList()
		},
		// 监听原生导航栏右侧点击事件
		onNavigationBarButtonTap() {
			// this.$refs.share.open()
			let obj = {
				range: this.range,
				isShow: true,
				CustomerId: this.options.Id,
				CompanyId: uni.getStorageSync('CompanyInfo').Id
			}
			uni.navigateTo({
				url: "/pages/Arrears/reconArrear?data=" + JSON.stringify(obj)
			})
		},
		methods: {
			// 字符串空格处理
			getReplaceId(data){
				if(data){
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 列表点击跳转详情
			reconClick(item) {
				let obj = {
					"CompanyId": item.CompanyId,
					"CustomerId": item.CustomerId,
					"StartTime": this.range[0],
					"EndTime": this.range[1],
					"isShow": false,
					"BillConfirmId": item.Id
				}
				// 列表跳转不显示日期选择
				uni.navigateTo({
					url: "/pages/Arrears/reconArrear?data=" + JSON.stringify(obj)
				})
			},
			// 触底
			lower(e) {
				if (this.entity.length >= this.Total) {
					this.status = "noMore"
					return
				}
				this.getBillConfirmList('on')
			},
			// 获取欠款对账单
			getBillConfirmList() {
				this.status = "loading"
				this.$http('post', '/BO/BIllcollection/GetBillConfirmList', this.query).then(res => {
					if (res.Success) {
						this.Total = res.Total
						let lists = res.Data
						if (res.Data.length == 0) {
							// 没有更多了
							this.status = "noMore"
						}
						if (lists.length == 0 && lists == []) {
							// 没有更多了
							this.status = "noMore"
							return
						} else {
							// res.Data.forEach(item => {
							// 	item.StartTime = formatDate('day', (item.StartTime).replace('.000', ''))
							// 	item.EndTime = formatDate('day', (item.EndTime).replace('.000', ''))
							// })

							if (this.query.PageIndex == 1) {
								this.entity = lists
								this.query.PageIndex += 1
							} else {
								this.entity = this.entity.concat(lists)
								this.query.PageIndex += 1
								if (this.query.PageRows * this.query.PageIndex > this.Total) {
									// 暂停加载  没有更多了
									this.status = "noMore"
									return
								}
							}
							this.status = "noMore"
						}
					} else {
						this.$api.msg(res.Msg)
						// 停止加载状态
						this.status = "noMore"
					}
				})
			},
			changeDate(e) {
				this.range = e
				this.query.Search.StartTime = e[0]
				this.query.Search.EndTime = e[1]
				this.query.PageIndex = 1
				this.getBillConfirmList()
			},
			momenyFormat(num) {
				num = Number(num)
				if (isNaN(num)) return '0.00'
				return num.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
			},
			confirm() {
				if (!this.base64) return this.$refs.popup.open()
				this.entity.Signature = this.base64
				this.entity.SignPhone = uni.getStorageSync('userInfo').phone
				this.$http('post', '/BO/BIllcollection/ConfirmReconciliationData', this.entity).then(res => {
					if (res.Success) {
						uni.showToast({
							icon: 'none',
							title: '确认成功'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000)
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			signFinish(base64) {
				this.base64 = base64
				this.$refs.popup.close()
			},
			signClose() {
				this.$refs.popup.close()
			},
			// 明细
			toDetail(Id) {
				uni.navigateTo({
					url: '/components/page/Detail?id=' + Id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	// ::v-deep.uni-date-x {
	// 	border-radius: 0;
	// }

	// ::v-deep.uni-date-x--border {
	// 	border: none;
	// }
	::v-deep .uni-checkbox-input {
		border-radius: 50%;
	}

	.CollectMoney {
		height: 100%;
		width: 100%;
		background-image: url('/static/background.png');
		background-size: cover;

		.moneyT {
			display: flex;
			justify-content: space-around;
			padding: 10px;
			padding-top: 18px;
			background-color: #ffffff7d;

			.tItem {
				width: 40%;
				background-color: #2ba7e9b3;
				color: #fff;
				box-sizing: border-box;
				border-radius: 10rpx;
				text-align: center;

				.title {
					border-bottom: 1px solid #eee;
					line-height: 2;
				}

				.content {
					font-weight: bold;
					line-height: 2;
					font-size: 34rpx;
				}
			}
		}

		.container {
			padding: 10px;
			box-sizing: border-box;
			height: calc(100vh - 100px);

			.scroll {
				.form {
					// margin: 30rpx 0;s
					// border-bottom: 1px solid #ccc;
					border-radius: 20rpx;
					background-color: #fff;
					padding: 15rpx;
					.unitag{
						margin-top: 20rpx;
						.uni-tag{
							font-weight: bold !important;
						}
					}
					.imgBox {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 120px;
						overflow: hidden;
						width: 300px;
						background-color: #fff;

						image {
							margin-left: 50px;
							transform: rotate(-90deg);
							width: 100px;
							background-color: #f5f5f5;
						}
					}

					.cell.right {
						display: flex;
						justify-content: space-between;
					}

					.cell {
						display: flex;
						margin-bottom: 10rpx;

						.label {
							color: #999;
							// width: 150rpx;
							// border-right: 1px solid #ccc;
							// padding-right: 20rpx;
							// text-align: right;
							// background-color: #fafafa;
						}

						.content {
							// flex: 1;
							// padding: 0 20rpx;
						}

						.cRight {
							// text-align: right;
						}
					}
				}


			}

			.cItem {
				background-color: #fff;
				border-radius: 10px;
				box-sizing: border-box;
				font-weight: 600;
				padding: 15rpx;
				margin-bottom: 20rpx;

				.bottomLine {
					// border-bottom: 1px solid #ccc;
					padding-bottom: 10rpx;
				}

				.line {
					display: flex;
					height: 60rpx;
					align-items: end;

					.cell {
						flex: 1;
						display: flex;
						justify-content: space-between;
						margin-right: 20rpx;

						.lable {
							width: 60px;
						}

						text {
							// flex: 1;
							// color: blue;
						}
					}
				}

				.flexRight {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					color: #2979ff;
					font-weight: normal;

					text {
						border-bottom: 1px solid #2979ff;
						margin-left: 60rpx;
					}
				}
			}
		}

		.edit {
			display: flex;
			position: fixed;
			background-color: #fff;
			bottom: 50px;
			/* #ifdef APP */
			bottom: 0;
			/* #endif */
			left: 0;
			// right: 0;
			width: 100vw;
			align-items: center;
			padding: 10px;
			box-sizing: border-box;
			justify-content: space-between;

			text {
				color: #777;
			}

			button {
				width: 70%;
				margin: 0;
			}
		}
	}
</style>